<template>
  <div>
    <CommonSearch
      :config="searchConfig"
      v-model="tableConfig.searchParams"
    ></CommonSearch>
    <CommonTable :config="tableConfig" ref="commonTable"> </CommonTable>
  </div>
</template>

<script>
import { reactive, toRefs, onMounted, getCurrentInstance } from 'vue';
import { getUserListApi } from '@/api/system.api';
import { sleep } from '@/utils/tools';
export default {
	name : 'user',
	setup () {
		let Instance = getCurrentInstance().proxy;
		let commonTable = null;
		let data = reactive({
			tableConfig : {
				searchParams : {},
				reqApiMethod : getUserListApi,
				responseHandler : (payload) => {
					return payload;
				},
				handlerHeader : (data) => {
					console.log(data);
				},
				handlerTable : (data) => {
					console.log(data);
				},
				handlerSelectionChange : (list) => {
					console.log(list);
				},
				handlerOperate : (payload, row) => {
					console.log(row);
					switch (payload.type) {
					case 'add':
						Instance.$hyDialogForm(data.formConfig);
						break;
					case 'edit':
						Instance.$hyDialogForm({
							data : {
								username : 'hulei',
								sts : '选项1',
								merchantCode : '选项4',
								payTime : '2020-12-12',
								test01 : '90:10:19',
								test001 : true,
								test002 : '选项1',
								test003 : ['选项1']
							},
							...data.formConfig
						});
						break;
					case 'find':
						Instance.$hyDialogForm({
							data : {
								username : 'hulei',
								sts : '选项1',
								merchantCode : '选项4',
								payTime : '2020-12-12',
								test01 : '90:10:19',
								test001 : true,
								test002 : '选项1',
								test003 : ['选项1']
							},
							disabled : true,
							...data.formConfig
						});
						break;
					default:
						break;
					}
				},
				mergeTable : () => {},
				columns : [
					{
						type : 'expand'
					},
					{
						type : 'index'
					},
					{
						type : 'selection'
					},
					{
						title : '用户名',
						field : 'name'
					},
					{
						title : '日期',
						field : 'date'
					},
					{
						title : '地址',
						field : 'address'
					}
				],
				globalOperate : [
					{
						type : 'add',
						name : '新增',
						color : 'primary',
						role : [],
						icon : 'el-icon-plus'
					},
					{
						type : 'edit',
						name : '修改',
						enable : '1',
						color : 'success',
						role : [],
						icon : 'el-icon-edit'
					},
					{
						type : 'find',
						name : '查看',
						enable : '1',
						color : 'warning',
						role : [],
						icon : 'el-icon-edit'
					},
					{
						type : 'delete',
						name : '删除',
						enable : '2',
						color : 'danger',
						role : [],
						icon : 'el-icon-delete'
					},
					{
						type : 'export',
						name : '导出',
						color : 'info',
						role : [],
						icon : 'el-icon-upload2'
					},
					{
						type : 'import',
						name : '导入',
						color : 'el-icon-download',
						role : [],
						icon : 'el-icon-upload2'
					}
				],
				operate : [
					{
						type : 'text',
						name : '修改',
						color : 'success',
						role : [],
						icon : 'el-icon-edit'
					},
					{
						type : 'text',
						name : '删除',
						color : 'danger',
						role : [],
						icon : 'el-icon-delete'
					}
				]
			},
			searchConfig : {
				handlerSearch () {
					return commonTable.fetchData({ isResetPageNumber : true });
				},
				form : [
					{
						type : 'text',
						label : '用户名:',
						placeholder : '请输入用户名',
						key : 'username',
						rules : [
							{ required : true, message : '请输入用户名', trigger : 'blur' }
						]
					},
					{
						type : 'select',
						label : '状态:',
						placeholder : '请选择状态',
						key : 'sts',
						rules : [
							{ required : true, message : '请选择状态', trigger : 'change' }
						],
						options : [
							{
								value : '选项1',
								label : '黄金糕'
							},
							{
								value : '选项2',
								label : '双皮奶'
							},
							{
								value : '选项3',
								label : '蚵仔煎'
							},
							{
								value : '选项4',
								label : '龙须面'
							},
							{
								value : '选项5',
								label : '北京烤鸭'
							}
						]
					},
					{
						type : 'select',
						label : '商户编号',
						placeholder : '请选择商户编号',
						key : 'merchantCode',
						getOptions : () => {
							return new Promise((resolve) => {
								setTimeout(() => {
									resolve([
										{
											value : '选项4',
											label : '龙须面'
										},
										{
											value : '选项5',
											label : '北京烤鸭'
										}
									]);
								}, 3000);
							});
						},
						remote : true,
						rules : [
							{ required : true, message : '请选择商户编号', trigger : 'change' }
						]
					},
					{
						type : 'date',
						commentsName : 'datePicker',
						label : '时间:',
						placeholder : '请选择时间',
						key : 'payTime',
						rules : [
							{ required : true, message : '请选择时间', trigger : 'change' }
						]
					},
					{
						commentsName : 'timeSelect',
						label : 'test01:',
						start : '08:30',
						step : '00:15',
						end : '18:30',
						key : 'test01',
						rules : [{ required : true, message : 'test01', trigger : 'change' }]
					}
				]
			},
			formConfig : {
				handlerSubmit (params) {
					console.log(params);
					return sleep(3000);
				},
				form : [
					{
						type : 'text',
						label : '用户名:',
						placeholder : '请输入用户名',
						key : 'username',
						rules : [
							{ required : true, message : '请输入用户名', trigger : 'blur' }
						]
					},
					{
						type : 'select',
						label : '状态:',
						placeholder : '请选择状态',
						key : 'sts',
						rules : [{ required : true, message : '请选择状态', trigger : 'blur' }],
						options : [
							{
								value : '选项1',
								label : '黄金糕'
							},
							{
								value : '选项2',
								label : '双皮奶'
							},
							{
								value : '选项3',
								label : '蚵仔煎'
							},
							{
								value : '选项4',
								label : '龙须面'
							},
							{
								value : '选项5',
								label : '北京烤鸭'
							}
						]
					},
					{
						type : 'select',
						label : '商户编号',
						placeholder : '请选择商户编号',
						key : 'merchantCode',
						getOptions : () => {
							return new Promise((resolve) => {
								setTimeout(() => {
									resolve([
										{
											value : '选项4',
											label : '龙须面'
										},
										{
											value : '选项5',
											label : '北京烤鸭'
										}
									]);
								}, 3000);
							});
						},
						remote : true,
						rules : [
							{ required : true, message : '请选择商户编号', trigger : 'blur' }
						]
					},
					{
						type : 'date',
						commentsName : 'datePicker',
						label : '时间:',
						placeholder : '请选择时间',
						key : 'payTime',
						rules : [{ required : true, message : '请选择时间', trigger : 'blur' }]
					},
					{
						commentsName : 'timeSelect',
						label : 'test01:',
						start : '08:30',
						step : '00:15',
						end : '18:30',
						key : 'test01',
						rules : [{ required : true, message : 'test01', trigger : 'blur' }]
					},
					{
						type : 'switch',
						label : '即时配送:',
						key : 'test001'
					},
					{
						type : 'radio',
						label : '特殊资源:',
						key : 'test002',
						rules : [{ required : true, message : '特殊资源', trigger : 'blur' }],
						options : [
							{
								value : '选项1',
								label : '黄金糕'
							},
							{
								value : '选项2',
								label : '双皮奶'
							}
						]
					},
					{
						type : 'checkbox',
						label : '特殊资源1:',
						key : 'test003',
						rules : [{ required : true, message : '特殊资源1', trigger : 'blur' }],
						options : [
							{
								value : '选项1',
								label : '黄金糕'
							},
							{
								value : '选项2',
								label : '双皮奶'
							}
						]
					}
				]
			}
		});

		onMounted(() => {
			commonTable = Instance.$refs['commonTable'];
		});
		return {
			...toRefs(data)
		};
	}
};
</script>

<style lang="scss" scoped></style>
